<template>
  <div class="pg-shaohuo-orders"
    layout="column">

    <!-- 页面搜索组件
    -------------------------- -->
    <comp-page-search
      :metaList="searchConfig"
      @searchCondChange="searchCondChange"
      module="PgShaohuoPersonList"></comp-page-search>


    <!-- 功能按钮区
    -------------------------- -->
    <div class="gl-page-btns">
      <el-popover
        class="pg-shaohuo-orders__popover"
        @hide="assignedPopover = false"
        placement="bottom"
        title="选择捎货人"
        width="200"
        :disabled="!selectList.length || assignedPopover"
        trigger="click">
        <el-select v-model="assigned"
          @change="assignedChange"
          :loading="!hasAssignedList"
          @visible-change="assignedVisibleShow"
          placeholder="请选择">
          <el-option
            v-for="item in assignedList"
            :key="item.uid"
            :label="item.nick_name"
            :value="item.uid">
          </el-option>
        </el-select>
        <el-button @click.native="assignedSelected('order_id')"
          type="success" size="mini"
          slot="reference"
          :loading="loadingBtn === '指派捎货人' && loadingRow === null">指派捎货人</el-button>
      </el-popover>
      <el-button @click.native="deleteSelected('order_id')"
        type="primary" size="mini"
        :loading="loadingBtn === '取消订单' && loadingRow === null">取消订单</el-button>
      <el-button @click.native="assignedFreeSelected('id')"
        type="primary" size="mini"
        :loading="loadingBtn === '恢复自由接单' && loadingRow === null">恢复自由接单</el-button>
      <el-button @click.native="exportCurrent()"
        type="primary" size="mini"
        :loading="loadingBtn === '导出数据' && loadingRow === null">导出数据</el-button>
      <iframe width="0" height="0" frameborder="0" name="exportIframe" style="display: none"></iframe>
    </div>

    <!-- 数据表格
    -------------------------- -->
    <comp-page-table
      :tableConfig="tableConfig"
      :tableData="tableData"
      :loading="tableLoading"
      :total="tableTotal"
      :pageSize="Number(pageSize)"
      :pageSizes="pageSizes"
      @currentChange="tableCurrentChange"
      @sortChange="tableSortChange"
      @sizeChange="tableSizeChange"
      @selectionChange="tableSelectionChange">
    </comp-page-table>
  </div>
</template>

<script>
import { tableConfig, searchConfig } from './config'
import {
  ordersSearchMixin,
  ordersDeleteMixin,
  ordersAssignedMixin,
  ordersExportMixin
} from './mixins'

import { RegExService } from 'services/Util'
import { ShaohuoOrdersService } from 'services/Api'
import {
  ConfirmTempMixin,
  btnLoadingMixin,
  tableCoreMixin,
  tableDeleteMixin,
  tableExportMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgShaohuoOrders',
  mixins: [
    ConfirmTempMixin,
    btnLoadingMixin,
    tableCoreMixin,
    tableDeleteMixin,
    tableExportMixin,
    ordersSearchMixin,
    ordersDeleteMixin,
    ordersAssignedMixin,
    ordersExportMixin
  ],
  data () {
    return {
      tableConfig,
      searchConfig
    }
  },
  computed: {
    ...mapState([ 'acc_id', 'uid' ]),
    // 接口参数
    listOrderParam () {
      return {
        acc_id: this.acc_id,
        page: this.page,
        page_size: this.pageSize,
        sort_field: this.sort_field,
        sort_type: this.sort_type,
        search: this.search,
        district: this.district,
        orderType: this.orderType,
        orderStatus: this.orderStatus,
        isShipping: this.isShipping,
        orderStime: this.orderStime,
        orderEtime: this.orderEtime,
        preSendStime: this.preSendStime,
        preSendEtime: this.preSendEtime,
        receiveStime: this.receiveStime,
        receiveEtime: this.receiveEtime,
        sendStime: this.sendStime,
        sendEtime: this.sendEtime
      }
    }
  },
  methods: {
    // 订单列表
    preFetchTableData () {
      return ShaohuoOrdersService.listOrder(this.listOrderParam)
    },
    tableDataHandler (list) {
      return list.map(i => {
        i.is_audio = RegExService.webSource(i.item_name)
        return i
      })
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-orders) {
  @include e(popover) {
    margin-left: 10px;
  }
  .el-button + span, span + .el-button {
    margin-left: 10px;
  }
}
</style>
